<template>
  <div class="app-container flex-column">
    <div class="flex-between mt10 mb10">
      <div></div>
      <div>
        <el-button type="primary" @click="openedit(0)">新增</el-button>
      </div>
    </div>
    <div style="flex: 1;overflow: auto;">
      <el-table :data="tableData" height="100%" border stripe @row-click="getrow" :row-class-name="tableRowClassName"
        highlight-current-row style="height: 100%;">
        <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
          <template scope="scope">
            <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" header-align="center" prop="title" show-overflow-tooltip>
          <template slot-scope="scope">
            <router-link :to="'/system/notice/editwd/docID/'+  scope.row.doc_id+'/type/'+type" class="link-type">
              <span>{{ scope.row.title }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center" prop="status">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
              @change="StatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="顶置" width="80" align="center" prop="dz">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.dz" active-value="0" inactive-value="1"
              @change="DzChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建人" header-align="center" prop="create_by" width="90" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建时间" header-align="center" prop="create_time" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" @click="openedit(scope.row.doc_id)">修改</el-link>
            <el-link type="primary" class="ml10" @click="handleDelete(scope.row)">删除</el-link>
            <el-link type="primary" class="ml10"
              :disabled="((currentpage - 1) * pagesize+scope.row.index) == 0 ? true : false"
              @click="moveup(scope.row.doc_id )">上移</el-link>
            <el-link type="primary" class="ml10"
              :disabled="((currentpage - 1) * pagesize+scope.row.index+1) == total ? true : false"
              @click="movedown(scope.row.doc_id )">
              下移
            </el-link>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="mb20">
      <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
        @pagination="getpagelist" />
    </div>

  </div>
</template>

<script>
  import {
    List,
    Up,
    Down,
    Del_Content,
    ChangeStatus,
    ChangeDz
  } from "@/api/system/notice";

  export default {
    name: "Notice",
    components: {

    },
    dicts: ['sys_normal_disable'],
    data() {
      return {
        type: 'notice',
        total: 0,
        currentpage: 1,
        pagesize: 100,
        // 岗位表格数据
        tableList: [],
        tableData: [],
        // 查询参数

      };
    },
    created() {
      this.getList();

    },
    mounted() {

    },
    methods: {

      DzChange(row) {
        let text = row.status === "0" ? "顶置" : "取消顶置";
        this.$modal.confirm('确认要"' + text + '""' + row.title + '"吗？').then(function() {
          var Params = {
            id: row.doc_id,
            dz: row.dz,
          }
          return ChangeDz(Params);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.dz = row.dz === "0" ? "1" : "0";
        });
      },
      StatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$modal.confirm('确认要"' + text + '""' + row.title + '"吗？').then(function() {
          var Params = {
            id: row.doc_id,
            status: row.status,
          }

          return ChangeStatus(Params);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
      },
      moveup(id) {
        let params = {
          id: id,
          type: this.type
        };
        Up(params).then(response => {
          this.getList();
        }).catch(err => {

        });
      },
      movedown(id) {
        let params = {
          id: id,
          type: this.type
        };
        Down(params).then(response => {
          this.getList();
        }).catch(err => {

        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const title = row.title;
        var Params = {
          id: row.doc_id
        }
        this.$modal
          .confirm(`是否确认删除?标题:${title}`)
          .then(function() {
            return Del_Content(Params);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess('删除成功');
          })
          .catch(() => {});

      },
      openedit(id) {
        this.$router.push(`/system/notice/editwd/docID/${id}/type/` + this.type)
      },
      /** 查询岗位列表 */
      getpagelist() {
        if (this.total > 0) {
          this.getindex = -1;
          this.tableData = this.tableList.slice((this.currentpage - 1) *
            this.pagesize, this.currentpage * this.pagesize);
        }
      },
      getList() {
        this.getindex = -1;
        var Params = {
          type: this.type
        }
        List(Params).then(res => {
          this.tableList = res.rows;
          this.total = this.tableList.length;
          this.getpagelist();
        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      }
    }
  };
</script>
